<template>
  <div class="common-list" v-loading="loading">
    <div class="d-flex justify-content-end my-3">
      <el-button type="success" icon="el-icon-refresh" class="fr"
      style="font-size: 14px;padding: 8px;" @click="getMsgs(false)">刷新数据</el-button>
      <el-button type="success" icon="el-icon-view" class="fr" v-show="!hidden"
      style="font-size: 14px;padding: 8px;" @click="bitchOper('read')">标记已读</el-button>
      <el-button type="success" icon="el-icon-delete" class="fr" v-show="this.total"
      style="font-size: 14px;padding: 8px;" @click="bitchOper('delete')">全部删除</el-button>
    </div>
    <div class="flex-column-center promp-msg" style="height: 500px;" v-show="!this.total && !loading">
      <img src="static/gongnengtishi.png" alt="">
      <h2>暂无消息</h2>
    </div>
    <!-- <el-checkbox-group v-model="checkedMsgs" @change="handleCheckedMsgsChange"> -->
    <ul class="list-group input-search" >
      <li class="list-group-item"
      :class="{currentrow: index === currentIndex, 'have-read': item.isRead === 'YES'}"
      v-for="(item, index) in msgs"
      :key="index"
      @click="handleSelect(index)">
        <div class="d-flex justify-content-between align-items-center">
          <div class="">
            <!-- <el-checkbox :label="item">
              <span>{{item.name}} {{item.address}} {{item.date}}</span>
            </el-checkbox> -->
            <el-badge is-dot :hidden="item.isRead === 'YES'"></el-badge>
            <span class="msg-content">{{item.msgContent}}</span>
          </div>
          <div class="">
            <span>{{$formatDateTime(item.ctime)}}</span>
            <!-- <el-tag type="info" v-show="item.isRead === 'YES'">已读</el-tag>
            <el-tag type="success" v-show="item.isRead === 'NO'">未读</el-tag> -->
            <i class="el-icon-close" @click="deleteRow(index)"></i>
          </div>
        </div>
      </li>
    </ul>
    <!-- </el-checkbox-group>
    <el-checkbox
    style="padding-left: 20px;"
    :indeterminate="isIndeterminate"
    v-model="checkAll"
    @change="handleCheckAllChange">全选</el-checkbox> -->
    <el-col :span="24" style="margin-top: 45px;text-align: center;">
      <el-button type="success" plain round class="width-200" v-if="msgs.length < total">查看更多</el-button>
    </el-col>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "notification",
  title: "消息通知",
  data () {
    return {
      currentRow: null,
      currentIndex: -1,
      // checkedMsgs: [],
      // checkAll: false,
      // isIndeterminate: true,
      loading: true,
      msgs: [],
      total: 0,
      offset: 0, // 加载的页数
      limit: 50 // 每次加载限制在多少
    }
  },
  mounted () {
    this.getMsgs()
  },
  methods: {
    addlist () {
      // this.total += 6
      this.offset += 1
      this.getMsgs(true)
    },
    getMsgs (isADD) {
      this.loading = true
      let params = {
        offset: this.offset * this.limit,
        limit: this.limit,
        userId: this.$store.state.user.user.user.userId
      }
      axios.post('/mscs/message/findUserMessageByUserId', this.$paramsConvert(params)).then(res => {
        if (res.data.code === 1) {
          if (res.data.data) {
            if (isADD) {
              this.msgs.push(...res.data.data.data)
            } else {
              this.msgs = res.data.data.data
            }
            this.total = res.data.data.count
          }
          this.$store.commit('setCount', res.data.data.number)
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      }).finally(() => {
        this.loading = false
      })


    },
    handleSelect (index) {
      this.currentIndex = index
      // this.tableData[index].show = true
      this.haveRead(index)
    },
    haveRead (index) {
      //标记已读
      if (this.msgs[index].isRead === 'YES') {
        return
      }
      axios.post('/mscs/message/setMessageReadStatus', this.$paramsConvert(
        {userId: this.$store.state.user.user.user.userId, msgId: this.msgs[index].msgId}
      )).then(res => {
        if (res.data.code === 1) {
          this.msgs[index].isRead = 'YES'
          this.$store.commit('setCount', res.data.data)
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })

    },
    deleteRow (index) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.loading = true
        axios.post('/mscs/message/delUserMessage', this.$paramsConvert(
          {userId: this.$store.state.user.user.user.userId, msgId: this.msgs[index].msgId}
        )).then(res => {
          if (res.data.code === 1) {
            this.msgs.splice(index, 1)
            this.total -= 1
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        }).finally(() => {
          this.loading = false
        })
      })
    },
    // handleCheckAllChange (val) {
    //   this.checkedMsgs = val ? this.msgs : []
    //   this.isIndeterminate = false
    // },
    // handleCheckedMsgsChange (value) {
    //   let checkedCount = value.length
    //   this.checkAll = checkedCount === this.msgs.length
    //   this.isIndeterminate = checkedCount > 0 && checkedCount < this.msgs.length
    // },
    bitchOper (type) {

      if (type === 'read') {
        this.loading = true
        axios.post('/mscs/message/setMessageReadStatus', this.$paramsConvert(
          { userId: this.$store.state.user.user.user.userId }
        )).then(res => {
          if (res.data.code === 1) {
            this.msgs.forEach(item => item.isRead = 'YES')
            this.$store.commit('setCount', res.data.data)
          } else {
            this.$codeError(res)
          }
        }).catch(error => {
          this.$catchError(error)
        }).finally(() => {
          this.loading = false
        })
        // 请求标记为已读
      } else if (type === 'delete') {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.loading = true
          axios.post('/mscs/message/delUserMessage', this.$paramsConvert(
            { userId: this.$store.state.user.user.user.userId }
          )).then(res => {
            if (res.data.code === 1) {
              this.msgs = []
              this.total = 0
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          }).finally(() => {
            this.loading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  },
  watch: {
    '$store.state.user.token' (val) {
      if (val) {
        this.getMsgs()
      }
    }
  },
  computed: {
    hidden () {
      if (this.$store.state.msg.count && this.$store.state.msg.count > 0) {
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
  .common-list {
    // padding-top: 30px;
    .list-group-item {
      padding: 8px 20px;
      border: none;
      border-bottom: 1px solid #d8d9d6;
      margin-bottom: 0;
      &::after {
        left: 0;
        right: 0;
        bottom: -1px;
        content: "";
        position: absolute;
        transform: scaleX(0);
        transition: transform 200ms;
        border-bottom: 1px solid #94c05a;
        pointer-events: none;
      }
      label {
        margin-bottom: 0;
        [class^=el-checkbox] {
          color: #000000;
        }
      }
      .msg-content {
        color: #000;
      }

    }
    .have-read {
      .msg-content {
        color: #888!important;
      }
    }
    .currentrow {
      &::after {
        transform: scaleX(1);
      }
    }
    [class^=el-icon-] {
      font-size: 20px;
      font-weight: bold;
      margin-left: 20px;
      color: #888;
      &:hover {
        color: #000;
      }
    }
  }

</style>
<style>
  .common-list .el-checkbox__label, .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #000000;
  }
  .have-read .el-checkbox__label, .have-read .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #888888;
  }
</style>
